<template>
  <div class="layout-all">
    <control :config="config" />
    <div class="layout-header" style="float:left" />
    <div class="layout-content">
      <el-table
        :data="tableData"
        stripe
        align="center"
        highlight-current-row
        style="width: 100%;margin-top:50px"
      >
        <el-table-column align="center" prop="content" label="问题内容" />
        <el-table-column align="center" prop="shop.title" label="商铺" width="250" />
        <el-table-column align="center" prop="goods.title" label="商品" width="250" />
        <el-table-column align="center" prop="user.nickname" label="用户" width="250" />
        <el-table-column align="center" prop="status" label="是否启用" width="80">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.status === 1 ? 'primary' : 'success'"
              size="mini"
              @click="change_status(scope.row.id,'status' ,scope.row.status)"
            >{{ scope.row.status === 1 ? "是" : "否" }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="telephone"
          fixed="right"
          width="240"
          label="操作"
        >
          <template slot-scope="scope">
            <!-- <el-button
              type="success"
              @click="onReply(scope.row.id)"
            >
              回复
            </el-button> -->
            <router-link :to="'/ask_abt/answer/index?id=' + scope.row.id">
              <el-button size="small" type="primary">回答</el-button>
            </router-link>
            <el-button
              size="small"
              type="danger"
              @click="onDel(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="回复操作"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="回复内容:" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 7}"
            placeholder="请输入回复内容"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import control from '../../components/control/control'
export default {
  components: { control },
  data() {
    return {
      dialogVisible: false,
      config: [
        { type: 'text', placeholder: '请输入内容', field: 'content', val: '' }
      ],
      value: '',
      searchWhere: {
        title: ''
      },
      tableData: [],
      total: 0,
      current_page: 1,
      per_page: 14,
      form: {
        question_id: 0,
        content: ''
      },
      rules: {
        content: [
          { required: true, message: '请输入回复内容', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.onSearch()
  },
  methods: {
    // 查询
    handleSizeChange(val) {
      this.onSearch()
    },
    handleCurrentChange(val) {
      this.current_page = val
      this.onSearch()
    },
    onSearch() {
      const form = {}
      form.page = this.current_page
      form.map = this.searchWhere
      this.get('/admin/GoodsQuestion/index', form, 'POST').then(e => {
        this.tableData = e.list.data
        this.per_page = e.list.per_page
        this.total = e.list.total
        this.current_page = e.list.current_page
      })
    },
    // 添加
    onAdd() {},
    // 编辑
    onReply(id) {
      this.form.question_id = id
      this.dialogVisible = true
    },
    // 回复
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.get('/admin/GoodsAnswer/shop_reply', this.form, 'POST').then(e => {
            this.$msg_ok('success', '回复成功')
            this.dialogVisible = false
            this.onSearch()
          })
        }
      })
    },
    // 修改状态
    change_status(id, field, val) {
      this.update(id, val, field, 'GoodsQuestion').then(e => {
        e ? this.onSearch() : ''
      })
    },
    // 删除
    onDel(id) {
      this.$msg_confirm().then(e => {
        if (e) {
          this.get('/admin/GoodsQuestion/del?id=' + id, this.form, 'POST').then(e => {
            this.onSearch()
          })
        }
      })
    }
  }
}
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
</style>>
